<template>
  <view class="container">
    <!-- 顶部标题信息 -->
    <view class="glass-card title-card">
      <view class="title-main">{{ detail.title }}</view>
      <view class="title-info">
        <view class="info-row">
          <text class="info-label">出发日期：</text>
          <text class="info-value">{{ detail.startTime }}</text>
        </view>
        <view class="info-row">
          <text class="info-label">出发城市：</text>
          <text class="info-value">{{ detail.startCity }}</text>
        </view>
      </view>
    </view>

    <!-- 航班信息卡片 -->
    <view class="glass-card flight-card">
      <template v-if="detail.airStatus !== 0">
        <view class="flight-header">
          <text class="flight-number">航班号：{{ detail.airCode }}</text>
          <text class="flight-date">计划飞行日期：{{ detail.startTime }}</text>
        </view>
        
        <view class="flight-route">
          <view class="departure">
            <text class="city">{{ detail.startCity }}</text>
          </view>
          
          <view class="flight-timeline">
            <view class="timeline-line"></view>
            <view class="plane-icon">✈</view>
          </view>
          
          <view class="arrival">
            <text class="city">{{ detail.endCity }}</text>
          </view>
        </view>
      </template>
      <template v-else>
        <view class="flight-uncertain">
          <view class="uncertain-icon">✈</view>
          <text class="uncertain-text">航班起飞时间未定</text>
        </view>
      </template>
    </view>
    
    <!-- 活动详情描述 -->
    <view class="glass-card activity-description">
      <text class="description-title">活动详情</text>
      <view class="description-content">
        <text>{{ detail.remark }}</text>
      </view>
    </view>
    
    <!-- 已报名用户 -->
    <view class="glass-card signed-users">
      <text class="signed-title">已报名 · {{ detail.groupMemberDetailVOList.length }}人</text>
      <view class="users-avatars">
        <view 
          v-for="(member, index) in detail.groupMemberDetailVOList.slice(0, 4)" 
          :key="index" 
          class="signed-avatar"
        >
          <text class="avatar-icon">👤</text>
        </view>
        <view class="more-avatars" v-if="detail.groupMemberDetailVOList.length > 4">
          <text class="more-text">+{{ detail.groupMemberDetailVOList.length - 4 }}</text>
        </view>
      </view>
    </view>
    
    <!-- 底部空白区域 -->
    <view style="height: 140rpx;"></view>
    
    <!-- 底部操作栏 -->
    <view class="glass-bottom-bar">
      <view class="price-section">
        <text class="price-range">已拼团{{ detail.groupMemberDetailVOList.length }}<text class="price-unit">人</text></text>
      </view>
      <view class="signup-btn" @tap="joinGroup">立即拼团</view>
    </view>
    
    <!-- 倒计时提示 -->
    <view class="glass-countdown">
      <text>最后倒计时 {{ countdown.hours }}:{{ countdown.minutes }}:{{ countdown.seconds }}</text>
    </view>
    
    <!-- 用户信息填写弹窗 -->
    <view class="glass-modal" v-if="showJoinForm">
      <view class="glass-modal-mask" @tap="cancelJoin"></view>
      <view class="glass-modal-container">
        <view class="glass-modal-header">
          <text class="glass-modal-title">填写拼团信息</text>
          <text class="glass-modal-close" @tap="cancelJoin">×</text>
        </view>
        
        <view class="glass-modal-content">
          <view class="glass-form-item">
            <text class="glass-form-label">姓名<text class="required">*</text></text>
            <input 
              class="glass-form-input" 
              v-model="joinForm.name" 
              placeholder="请输入您的姓名"
              placeholderClass="glass-input-placeholder"
              @input="validateField('name')"
            />
            <text class="error-text" v-if="formErrors.name">{{ formErrors.name }}</text>
          </view>
          
          <view class="glass-form-item">
            <text class="glass-form-label">手机号<text class="required">*</text></text>
            <input 
              class="glass-form-input" 
              v-model="joinForm.phone" 
              placeholder="请输入手机号码"
              placeholderClass="glass-input-placeholder"
              type="number"
              maxlength="11"
              @input="validateField('phone')"
            />
            <text class="error-text" v-if="formErrors.phone">{{ formErrors.phone }}</text>
          </view>
          
          <view class="glass-form-item">
            <text class="glass-form-label">微信号<text class="required">*</text></text>
            <input 
              class="glass-form-input" 
              v-model="joinForm.wechat" 
              placeholder="请输入微信号"
              placeholderClass="glass-input-placeholder"
              @input="validateField('wechat')"
            />
            <text class="error-text" v-if="formErrors.wechat">{{ formErrors.wechat }}</text>
          </view>
          
          <view class="glass-form-item">
            <text class="glass-form-label">备注</text>
            <textarea 
              class="glass-form-textarea" 
              v-model="joinForm.remark" 
              placeholder="请输入备注信息（选填）"
              placeholderClass="glass-input-placeholder"
            />
          </view>
        </view>
        
        <view class="glass-modal-footer">
          <view class="glass-btn glass-btn-cancel" @tap="cancelJoin">取消</view>
          <view class="glass-btn glass-btn-confirm" @tap="submitJoin">确认加入</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getDetail,join } from "../../api/pt";
export default {
  data() {
    return {
      countdown: {
        hours: '01',
        minutes: '01',
        seconds: '27'
      },
      detail: {
        id: 'group001',
        title: '4月韩国落地签3日团 | 首尔-济州岛 品质酒店 含接送机',
        createTime: '2023-03-15',
        viewCount: 3421,
        images: [
          'https://picsum.photos/id/237/800/600',
          'https://picsum.photos/id/238/800/600',
          'https://picsum.photos/id/239/800/600'
        ],
        description: '本次不要求团人比参赛人多，我从要落地签的几个人中挑，在选拔中时间紧，他们不在乎。我可以签几个人一样，一二种补办不要能收人就好返。等当中有第一个评比完有教育才，在第三个一二种...',
        currentMembers: 4,
        flight: {
          flightNumber: 'KE856',
          date: '2023-04-01',
          departureTime: '08:30',
          departureCity: '上海',
          arrivalTime: '11:30',
          arrivalCity: '首尔',
          duration: '3小时'
        },
        organizer: {
          id: 'org001',
          name: '柳茜茜',
          avatar: 'https://picsum.photos/id/64/200/200'
        },
        members: [
          {
            id: 'mem001',
            avatar: 'https://picsum.photos/id/64/200/200',
            isOrganizer: true
          },
          {
            id: 'mem002',
            avatar: 'https://picsum.photos/id/65/200/200',
            isOrganizer: false
          },
          {
            id: 'mem003',
            avatar: 'https://picsum.photos/id/66/200/200',
            isOrganizer: false
          },
          {
            id: 'mem004',
            avatar: 'https://picsum.photos/id/67/200/200',
            isOrganizer: false
          }
        ]
      },
      showJoinForm: false,
      joinForm: {
        name: '',
        phone: '',
        wechat: '',
        remark: ''
      },
      formErrors: {
        name: '',
        phone: '',
        wechat: ''
      }
    };
  },
  onLoad(e) {
    console.log(e,'EEEEEEEEEEE');
    // 调用 purchase 接口获取详情数据
    getDetail(e.id).then(res => {
      console.log(res,'res');
      if (res.code === 200) {
        this.detail = res.data;
      } else {
        uni.showToast({
          title: res.msg || '获取详情失败',
          icon: 'none'
        });
      }
    }).catch(err => {
      uni.showToast({
        title: '获取详情失败',
        icon: 'none'
      });
    });
    
    // 初始化倒计时
    this.startCountdown();
  },
  methods: {
    onSwiperChange(e) {
      this.currentImageIndex = e.detail.current;
    },
    startCountdown() {
      // 实际应用中应该使用服务器时间来计算倒计时
      const updateCountdown = () => {
        const now = new Date();
        const end = this.detail.endTime;
        const diff = end - now;
        
        if (diff <= 0) {
          this.countdown = { hours: '00', minutes: '00', seconds: '00' };
          return;
        }
        
        const hours = Math.floor(diff / (1000 * 60 * 60));
        const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((diff % (1000 * 60)) / 1000);
        
        this.countdown = {
          hours: hours < 10 ? '0' + hours : hours.toString(),
          minutes: minutes < 10 ? '0' + minutes : minutes.toString(),
          seconds: seconds < 10 ? '0' + seconds : seconds.toString()
        };
      };
      
      // 立即更新一次
      updateCountdown();
      
      // 每秒更新
      this.countdownTimer = setInterval(updateCountdown, 1000);
    },
    goBack() {
      uni.navigateBack();
    },
    saveImage() {
      uni.showActionSheet({
        itemList: ['保存图片到相册'],
        success: () => {
          uni.showLoading({ title: '保存中...' });
          // 模拟保存过程
          setTimeout(() => {
            uni.hideLoading();
            uni.showToast({ title: '保存成功', icon: 'success' });
          }, 1000);
        }
      });
    },
    joinGroup() {
      // 显示表单弹窗
      this.showJoinForm = true;
    },
    cancelJoin() {
      this.showJoinForm = false;
      // 重置表单
      this.resetForm();
    },
    resetForm() {
      this.joinForm = {
        name: '',
        phone: '',
        wechat: '',
        remark: ''
      };
      this.formErrors = {
        name: '',
        phone: '',
        wechat: ''
      };
    },
    validateField(field) {
      switch(field) {
        case 'name':
          if (this.joinForm.name.trim()) {
            this.formErrors.name = '';
          }
          break;
        case 'phone':
          const phoneReg = /^1[3-9]\d{9}$/;
          if (this.joinForm.phone && phoneReg.test(this.joinForm.phone)) {
            this.formErrors.phone = '';
          }
          break;
        case 'wechat':
          if (this.joinForm.wechat.trim()) {
            this.formErrors.wechat = '';
          }
          break;
      }
    },
    validateForm() {
      let isValid = true;
      
      // 验证姓名
      if (!this.joinForm.name.trim()) {
        this.formErrors.name = '请输入姓名';
        isValid = false;
      }
      
      // 验证手机号
      const phoneReg = /^1[3-9]\d{9}$/;
      if (!this.joinForm.phone) {
        this.formErrors.phone = '请输入手机号';
        isValid = false;
      } else if (!phoneReg.test(this.joinForm.phone)) {
        this.formErrors.phone = '请输入正确的手机号格式';
        isValid = false;
      }
      
      // 验证微信号
      if (!this.joinForm.wechat.trim()) {
        this.formErrors.wechat = '请输入微信号';
        isValid = false;
      }
      
      return isValid;
    },
    submitJoin() {
      if (!this.validateForm()) {
        // 表单验证失败
        uni.showToast({
          title: '请检查表单填写',
          icon: 'none'
        });
        return;
      }
      
      // 显示加载中
      uni.showLoading({ title: '提交中...' });
      
      // 调用 join 接口
      join({
        groupId: this.detail.id,
        name: this.joinForm.name,
        phone: this.joinForm.phone,
        wechat: this.joinForm.wechat
      }).then(res => {
        if (res.code === 200) {
          // 关闭表单弹窗
          this.showJoinForm = false;
          // 显示成功提示
          uni.showToast({
            title: '拼团成功',
            icon: 'success',
            duration: 2000,
            success: () => {
              // 重置表单
              this.resetForm();
            }
          });
        } else {
          uni.showToast({
            title: res.msg || '拼团失败',
            icon: 'none'
          });
        }
      }).catch(err => {
        uni.showToast({
          title: '拼团失败',
          icon: 'none'
        });
      }).finally(() => {
        // 无论成功还是失败，都关闭 loading
        uni.hideLoading();
      });
    }
  },
  onUnload() {
    // 清除倒计时定时器
    if (this.countdownTimer) {
      clearInterval(this.countdownTimer);
    }
  }
};
</script>

<style>
.container {
  min-height: 100vh;
  padding: 30rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
}

/* 顶部用户信息 */
.user-header {
  padding: 20rpx 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #FFFFFF;
}

.user-info {
  display: flex;
  align-items: center;
}

.user-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 16rpx;
}

.user-text {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333333;
}

.user-date {
  font-size: 24rpx;
  color: #999999;
  margin-top: 4rpx;
}

.action-buttons {
  display: flex;
}

.action-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 20rpx;
}

.icon {
  font-size: 40rpx;
  color: #666666;
}

/* 主图 */
.main-image-container {
  position: relative;
}

.main-image {
  width: 100%;
  height: 560rpx;
  display: block;
}

.image-count {
  position: absolute;
  right: 20rpx;
  bottom: 20rpx;
  background-color: rgba(0, 0, 0, 0.5);
  color: #FFFFFF;
  font-size: 24rpx;
  padding: 6rpx 12rpx;
  border-radius: 20rpx;
}

/* Glassmorphism 基础样式 */
.glass-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20rpx;
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}

/* 顶部标题卡片样式 */
.title-card {
  margin-top: 30rpx;
  padding: 40rpx 30rpx;
}

.title-main {
  font-size: 36rpx;
  font-weight: bold;
  color: #FFFFFF;
  margin-bottom: 20rpx;
  line-height: 1.4;
}

.title-info {
  margin-top: 20rpx;
  padding-top: 20rpx;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.info-row {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
}

.info-row:last-child {
  margin-bottom: 0;
}

.info-label {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.6);
  width: 140rpx;
}

.info-value {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  flex: 1;
}

/* 航班信息卡片 */
.flight-card {
  margin-top: 30rpx;
}

.flight-header {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
  margin-bottom: 30rpx;
  padding-bottom: 20rpx;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.flight-number {
  font-size: 32rpx;
  font-weight: bold;
  color: #FFFFFF;
}

.flight-date {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.8);
}

.flight-route {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 0;
}

.departure, .arrival {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.city {
  font-size: 32rpx;
  font-weight: 500;
  color: #FFFFFF;
}

.flight-timeline {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 30rpx;
  position: relative;
}

.timeline-line {
  width: 100%;
  height: 2rpx;
  background: rgba(255, 255, 255, 0.2);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.plane-icon {
  font-size: 36rpx;
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.1);
  padding: 10rpx 20rpx;
  border-radius: 30rpx;
  position: relative;
  z-index: 1;
}

/* 航班未定状态样式 */
.flight-uncertain {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40rpx 0;
}

.uncertain-icon {
  font-size: 48rpx;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 20rpx;
}

.uncertain-text {
  font-size: 32rpx;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

/* 活动描述 */
.activity-description {
  color: #FFFFFF;
}

.description-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  display: block;
}

.description-content {
  font-size: 28rpx;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
}

/* 已报名用户 */
.signed-users {
  color: #FFFFFF;
}

.signed-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  display: block;
}

.users-avatars {
  display: flex;
  align-items: center;
}

.signed-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 20rpx;
  border: 2rpx solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
}

.avatar-icon {
  font-size: 40rpx;
  color: rgba(255, 255, 255, 0.8);
}

.more-avatars {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  border: 2rpx solid rgba(255, 255, 255, 0.3);
}

.more-text {
  color: rgba(255, 255, 255, 0.8);
  font-size: 24rpx;
}

/* 底部操作栏 */
.glass-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 20rpx 30rpx;
  box-shadow: 0 -8px 32px rgba(31, 38, 135, 0.37);
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
}

.price-section {
  flex: 1;
  height: 80rpx;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 40rpx 0 0 40rpx;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
}

.price-range {
  color: #FFFFFF;
  font-size: 32rpx;
  font-weight: bold;
}

.price-unit {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.8);
  font-weight: normal;
}

.signup-btn {
  width: 200rpx;
  height: 80rpx;
  background: rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
  font-size: 32rpx;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 40rpx 40rpx 0;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* 倒计时提示 */
.glass-countdown {
  position: fixed;
  bottom: calc(120rpx + env(safe-area-inset-bottom));
  left: 0;
  right: 0;
  text-align: center;
  font-size: 24rpx;
  color: #FFFFFF;
  padding: 10rpx 0;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* Glassmorphism 模态框 */
.glass-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.glass-modal-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.glass-modal-container {
  position: relative;
  width: 90%;
  max-width: 650rpx;
  max-height: 80vh;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20rpx;
  border: 1px solid rgba(255, 255, 255, 0.18);
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
  z-index: 1000;
  display: flex;
  flex-direction: column;
}

.glass-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-modal-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #FFFFFF;
}

.glass-modal-close {
  font-size: 40rpx;
  color: rgba(255, 255, 255, 0.8);
  width: 60rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
}

.glass-modal-content {
  padding: 20rpx 30rpx;
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.glass-form-item {
  margin-bottom: 20rpx;
}

.glass-form-label {
  display: block;
  font-size: 28rpx;
  color: #FFFFFF;
  margin-bottom: 8rpx;
  font-weight: 500;
}

.required {
  color: #FF3B30;
  margin-left: 4rpx;
}

.error-text {
  font-size: 24rpx;
  color: #FF3B30;
  margin-top: 8rpx;
  display: block;
}

.glass-form-input {
  width: 100%;
  height: 70rpx;
  border-radius: 10rpx;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.1);
  box-sizing: border-box;
}

.glass-form-input.error {
  border-color: #FF3B30;
}

.glass-form-textarea {
  width: 100%;
  height: 120rpx;
  border-radius: 10rpx;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 15rpx 20rpx;
  font-size: 28rpx;
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.1);
  box-sizing: border-box;
}

.glass-input-placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.glass-modal-footer {
  display: flex;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-btn {
  flex: 1;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30rpx;
}

.glass-btn-cancel {
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.1);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-btn-confirm {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.2);
  font-weight: 500;
}
</style>
